<template>
  <div id="bottom-nav">
    <mu-container class="container">
      <mu-bottom-nav :value.sync="shift" shift>
        <router-link to="/PM">
          <mu-bottom-nav-item value="grain" title="PM" icon="grain"></mu-bottom-nav-item>
        </router-link>
        <router-link to="/temperature">
          <mu-bottom-nav-item value="wb_cloudy" title="温湿度" icon="wb_cloudy"></mu-bottom-nav-item>
        </router-link>
        <mu-bottom-nav-item value="history" title="历史" icon="history"></mu-bottom-nav-item>
        <mu-bottom-nav-item value="account_circle" title="关于" icon="account_circle"></mu-bottom-nav-item>
      </mu-bottom-nav>
    </mu-container>
  </div>
</template>

<script>
  export default {
    name: "Bottom",
    data() {
      return {
        shift: 'movies'
      }
    }
  }
</script>

<style scoped>
#bottom-nav{
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: 100;
}
.container{
  padding: 0;
}
</style>